<template>
    <el-row>
        <el-col :span="12">
            <el-image
                :src="product.mainImage"
                style="height: 400px; width: 600px;"
                fit="contain"></el-image>
            <!-- 商品图片 - 轮播图 -->
<!--            <el-carousel height="400px" motion-blur>
                <el-carousel-item v-for="(pic, index) in product.picList" :key="index">
                    <el-image
                        :src="`${SERVER_ADDR}/goods/pic/${pic.url}`"
                        style="height: 400px; width: 600px;"
                        fit="contain"></el-image>
                </el-carousel-item>
            </el-carousel>-->
        </el-col>
        <el-col :span="12">
            <!--  商品基本信息 名字 颜色 版本 价格....  -->
            <div class="info">
                <div class="name">{{ product.name }}</div>
                <div class="dscp">{{ product.subtitle }}</div>
                <div class="price">售价￥ {{ product.price }}</div>
                <div class="markPrice">原价￥ {{ product.price }}</div>
                <div class="count">数量 {{ product.stock }}</div>
                <div class="goodsBtn">
                    <el-button type="primary" size="large" @click="insertCart"><el-icon><ShoppingCart/></el-icon>加入购物车</el-button>
                    <!--<el-button type="success" size="large" @click="toCreateOrderPage"><el-icon><Money/></el-icon>直接购买</el-button>-->
                    <el-button type="info" size="large" v-if="!collectInfo" @click="collect"><el-icon><StarFilled/></el-icon>收藏</el-button>
                    <el-button type="danger" size="large" v-else @click="cancelCollect"><el-icon><Star/></el-icon>取消收藏</el-button>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <!--  商品详情/商品评价  -->
        <el-tabs model-value="first" class="demo-tabs" type="border-card">
            <el-tab-pane label="商品详情" name="first" v-html="product.detail"></el-tab-pane>
            <el-tab-pane label="商品评价" name="second" v-html="product.detail"></el-tab-pane>
        </el-tabs>
    </el-row>
</template>

<script setup>
import productApi from "@/api/productApi.js";
import cartApi from "@/api/cartApi.js";
import {ref} from "vue";
import {useRoute} from "vue-router";
import {useRouter} from "vue-router";
import collectApi from "@/api/collectApi.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {useTokenStore} from "@/stores/token.js";

const tokenStore = useTokenStore();
const route = useRoute();
const router = useRouter();
//需要显示的商品
const product = ref({});
//商品收藏状态
const collectInfo = ref(null);
//服务器地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);

//跳转到生成订单页面
// function toCreateOrderPage() {
//     let goodsId = route.query.id;
//     router.push({
//         path: "/user/createOrder",
//         query: {
//             goodsId
//         }
//     });
// }

//加入购物车
function insertCart() {
    cartApi.add(product.value.id).then(resp => {
        ElMessageBox.confirm(
            '加入购物车成功, 是否跳转到购物车页面?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info',
            }
        ).then(() => {
            //点击确定按钮的回调 -- 去购物车页面
            router.push("/cart");
        });

    });
}

//根据商品id查询商品详情信息
function selectById() {
    let id = route.query.id;
    productApi.selectById(id).then(result => {
        product.value = result.data;
        //判断用户是否已经登录
        if(tokenStore.tokenStr != null) {
            //获取当前商品收藏的情况
            getCollectInfo();
        }
    });
}
function getCollectInfo() {
    collectApi.selectByGoodsIdAndUserId(product.value.id)
        .then(resp => {
            collectInfo.value = resp.data;
        });
}

//收藏
function collect() {
    collectApi.insert(product.value.id)
        .then(resp => {
            if(resp.code == 10000) {
                ElMessage.success(resp.msg);
                //刷新收藏状态
                getCollectInfo();
            } else {
                ElMessage.error(resp.msg);
            }
        });
}

//取消收藏
function cancelCollect() {
    collectApi.delete(collectInfo.value.id)
        .then(resp => {
            if(resp.code == 10000) {
                ElMessage.success(resp.msg);
                //刷新收藏状态
                getCollectInfo();
            } else {
                ElMessage.error(resp.msg);
            }
        })
}

selectById();
</script>

<style scoped>
.el-carousel {
    margin: 15px 0px;
    border: 1px solid #AAA;
}

.info {
    margin: 30px 60px;
}

.info div {
    margin-bottom: 15px;
}

.info .name {
    font-size: 25px;
    font-weight: bold;
}

.info .dscp {
    color: #999;
}

.info .price {
    color: var(--theme-color);
    font-size: 18px;
}

.info .markPrice {
    color: #999;
    font-size: 15px;
    text-decoration: line-through; /* 删除线 */
}

.info span {
    display: inline-block;
    line-height: 30px;
    border: 2px solid var(--theme-color);
    border-radius: 5px;
    background-color: #FFF;
    padding: 0px 10px;
}

.info .count {
    font-size: 15px;
}

.el-icon {
    margin-right: 3px;
}
</style>